<template>
    <!-- 询价单基本信息 -->

    <a-card title="询价单基本信息" style="width: 80rem ; margin-bottom:30px">
        <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off"
            @finish="onFinish" @finishFailed="onFinishFailed">
            <div style="display:flex;flex-wrap: wrap;">
                <a-form-item label="询价标题" :label-col="{ span: 0 }" name="itemTitle"
                    :rules="[{ required: true, message: '请输入标题' }]" style="flex-basis: calc(50% - 5px); ">
                    <a-input v-model:value="formState.itemtitle" placeholder="请输入标题" />
                </a-form-item>
                <a-form-item label="项目名称" name="projectName" :rules="[{ required: false }]"
                    style="flex-basis: calc(50% - 5px); margin-left: 10px;">
                    <a-input v-model:value="formState.projectname" placeholder="请输入项目名称" />
                </a-form-item>

            </div>

            <div style="display:flex;flex-wrap: wrap;">
                <a-form-item label="联系人" :label-col="{ span: 0 }" name="contact" :rules="[{ required: false }]"
                    style="flex-basis: calc(50% - 5px)">
                    <a-input v-model:value="formState.contact" placeholder="请输入联系人" />
                </a-form-item>
                <a-form-item label="咨询单位" name="from" style="flex-basis: calc(50% - 5px); margin-left: 10px;">
                    <a-input v-model:value="formState.from" />
                </a-form-item>

            </div>


            <div style="display:flex;flex-wrap: wrap;">
                <a-form-item label="联系电话" :label-col="{ span: 0 }" name="phoneNumber"
                    :rules="[{ required: true, message: '请输入联系电话' }]" style="flex-basis: calc(50% - 5px)">
                    <a-input v-model:value="formState.phoneNumber" placeholder="请输入联系电话" />
                </a-form-item>
                <a-form-item label="项目地区" :label-col="{ span: 0 }" name="projectPosition"
                    :rules="[{ required: true, message: '请输入项目地区' }]"
                    style="flex-basis: calc(50% - 5px); margin-left: 10px;">
                    <a-input v-model:value="formState.projectPosition" />
                </a-form-item>
            </div>


            <div style="display:flex;flex-wrap: wrap;">
                <a-form-item label="付款方式" :label-col="{ span: 0 }" name="payment" style="flex-basis: calc(50% - 5px); ">
                    <a-input v-model:value="formState.payment" placeholder="请输入内容" />
                </a-form-item>
                <a-form-item label="供货周期" :label-col="{ span: 0 }" name="span"
                    style="flex-basis: calc(50% - 5px); margin-left: 10px;">
                    <a-input v-model:value="formState.span" palceholder="请输入周期/天" />
                </a-form-item>
            </div>


            <div style="display:flex;flex-wrap: wrap;">
                <a-form-item label="报名截止时间:" style="flex-basis: calc(50% - 5px)">
                    <a-date-picker v-model:value="formState.deadline" style="margin-left:10px" />
                </a-form-item>
                <a-form-item label="材料商地区:" style="flex-basis: calc(50% - 5px); margin-left: 10px;float:right">
                    <a-cascader v-model:value="value" :options="options" expand-trigger="hover" placeholder="请选择地区"
                        style="margin-left:10px" />
                </a-form-item>
            </div>





            <a-form-item label="询问类别" :label-col="{ span: 0 }" :rules="[{ required: true, message: '请选择询问类别' }]">
                <a-checkbox-group v-model:value="formState1.use">
                    <a-checkbox value="1" name="type">材料</a-checkbox>
                    <a-checkbox value="2" name="type">设备</a-checkbox>
                    <a-checkbox value="3" name="type">机械租赁</a-checkbox>
                    <a-checkbox value="4" name="type">劳务分包</a-checkbox>
                    <a-checkbox value="5" name="type">机械分包</a-checkbox>
                </a-checkbox-group>
            </a-form-item>

            <a-form-item label="价格用途" :label-col="{ span: 0 }" :rules="[{ required: true, message: '请输入价格用途!' }]">
                <a-checkbox-group v-model:value="formState.use">
                    <a-checkbox value="1" name="type">采购</a-checkbox>
                    <a-checkbox value="2" name="type">预算</a-checkbox>
                    <a-checkbox value="3" name="type">结算</a-checkbox>
                    <a-checkbox value="4" name="type">招投标</a-checkbox>
                </a-checkbox-group>
            </a-form-item>

            <a-form-item label="是否加盖公章" :label-col="{ span: 0 }" :rules="[{ required: false, message: '请选择!' }]"
                style="flex-basis: calc(50% - 5px)">
                <a-radio-group v-model:value="formState.stampOrNot">
                    <a-radio value="1">是</a-radio>
                    <a-radio value="2">否</a-radio>
                </a-radio-group>
            </a-form-item>


            <a-form-item label="报价是否公开" :label-col="{ span: 0 }" :rules="[{ required: false, message: '请选择!' }]"
                style="flex-basis: calc(50% - 5px)">
                <a-radio-group v-model:value="formState.publicOrNot">
                    <a-radio value="1">是</a-radio>
                    <a-radio value="2">否</a-radio>
                </a-radio-group>
            </a-form-item>



        </a-form>
    </a-card>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { ref } from 'vue';
import type { CascaderProps } from 'ant-design-vue';
const options: CascaderProps['options'] = [
    {
        value: 'zhejiang',
        label: 'Zhejiang',
        children: [
            {
                value: 'hangzhou',
                label: 'Hangzhou',
                children: [
                    {
                        value: 'xihu',
                        label: 'West Lake',
                    },
                ],
            },
        ],
    },
    {
        value: 'jiangsu',
        label: 'Jiangsu',
        children: [
            {
                value: 'nanjing',
                label: 'Nanjing',
                children: [
                    {
                        value: 'zhonghuamen',
                        label: 'Zhong Hua Men',
                    },
                ],
            },
        ],
    },
];

const value = ref<string[]>([]);

const formState = reactive({

})

const formState1 = reactive({

})

const onFinish = values => {
    console.log('Success:', values);
}
const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
}


</script>

<style lang="scss" scoped>
.wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;

}

.publish {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
</style>